<template>
  <div class="h-[100vh] mySwiperContainer" v-loading="loading">
    <swiper class="mySwiper" :style="style" :loop="true" :autoplay="autoplay" :navigation="true" :grabCursor="true"
      :scrollbar="scrollbar" :pagination="pagination" :effect="'fade'" :modules="modules"
      @autoplayTimeLeft="onAutoplayTimeLeft">
      <swiper-slide v-for="(item, index) in 3" :key="index">
        <img class="w-full h-full object-cover fade-effect" :src="`https://picsum.photos/1920/1080?${index}`"
          :alt="item">
      </swiper-slide>
      <template #container-end>
        <div class="autoplay-progress">
          <svg viewBox="0 0 48 48" ref="progressCircle">
            <circle cx="24" cy="24" r="20"></circle>
          </svg>
          <span ref="progressContent"></span>
        </div>
      </template>
    </swiper>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import 'swiper/css/scrollbar'
import 'swiper/css/effect-fade';

import { Navigation, Pagination, Autoplay, Scrollbar, Mousewheel, EffectFade } from 'swiper/modules'
const modules = ref([Navigation, Pagination, Autoplay, Scrollbar, Mousewheel, EffectFade])
const loading = ref(true)
// 自定义分页等样式
const color = ref('#fff');
const style = ref({
  width: '100%',
  height: '100%',
  '--swiper-navigation-color': color.value,
  '--swiper-pagination-color': color.value,
  '--swiper-pagination-bullet-inactive-color': color.value,
  '--swiper-pagination-bullet-inactive-opacity': '0.4',
})
const autoplay = ref({
  delay: 7000,
  disableOnInteraction: false,//用户操作swiper之后，是否禁止autoplay。默认为true：停止。
  // pauseOnMouseEnter: true,// 鼠标移入暂停
  // reverseDirection: true,// 反向播放
  // waitForTransition: true,// 等待过渡完成 
})

const pagination = ref({
  clickable: true,
  // type: 'fraction',
  // type: 'progressbar',
  type: 'bullets',
})
const scrollbar = ref({
  hide: false,
  draggable: true,
})

const progressCircle = ref(null);
const progressContent = ref(null);
const onAutoplayTimeLeft = (swiper, time, progress) => {
  // console.log(swiper);
  progressCircle.value.style.setProperty('--progress', 1 - progress);
  progressContent.value.textContent = `${Math.ceil(time / 1000)}s`;
};
onMounted(() => {
  loading.value = false
})
</script>
<style scoped lang="scss">
.mySwiperContainer {
  width: 100%;

  .mySwiper {
    position: relative;

    .swiper-slide {
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

      img.fade-effect {
        transition: 7s linear;
        transform: scale(1.21);
      }
    }

    .swiper-slide-active,
    .swiper-slide-duplicate-active {
      img.fade-effect {
        transform: scale(1);
      }
    }

    .autoplay-progress {
      position: absolute;
      right: 16px;
      bottom: 16px;
      z-index: 10;
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      color: var(--swiper-theme-color);

      svg {
        --progress: 0;
        position: absolute;
        left: 0;
        top: 0px;
        z-index: 10;
        width: 100%;
        height: 100%;
        stroke-width: 4px;
        stroke: var(--swiper-theme-color);
        fill: none;
        stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
        stroke-dasharray: 125.6;
        transform: rotate(-90deg);
      }
    }
  }
}
</style>
